<!--
 * @Descripttion: 房源筛选管理
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-25 10:32:41
-->
<template>
  <div class="lb-app-house-screen">
    <top-nav></top-nav>
    <div class="page-main">
      <el-tabs type="border-card">
        <el-tab-pane label="区域">
          <lb-button
            type="primary"
            icon="el-icon-plus"
            @click="addEditAreaInfo('add')"
            >添加区域</lb-button
          >
          <lb-tool-tips mode="text"
            ><div class="c-warning">
              新增城市需填写城市（市/州/区）的全称，例如：成都市，九龙坡区，阿坝藏族羌族自治州
            </div></lb-tool-tips
          >
          <div style="height: 20px"></div>
          <el-table
            v-loading="areaLoading"
            :data="areaData"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="title" label="名称"> </el-table-column>
            <el-table-column prop="sort" label="排序值"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    type="primary"
                    size="mini"
                    plain
                    @click="addEditAreaInfo('edit', scope.row.id)"
                    >{{ $t('action.edit') }}</lb-button
                  >
                  <lb-button
                    type="danger"
                    size="mini"
                    plain
                    @click="delAreaInfo(scope.row.id)"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="价格">
          <lb-button
            type="primary"
            icon="el-icon-plus"
            @click="addEditPriceInfo('add')"
            >添加价格</lb-button
          >
          <div style="height: 20px"></div>
          <el-table
            v-loading="priceLoading"
            :data="priceData"
            row-key="id"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID"> </el-table-column>
            <el-table-column prop="title" label="标题" width="180">
            </el-table-column>
            <el-table-column prop="value" label="值"> </el-table-column>
            <el-table-column prop="sort" label="排序值"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    type="primary"
                    size="mini"
                    plain
                    @click="addEditPriceInfo('edit', scope.row.id)"
                    >{{ $t('action.edit') }}</lb-button
                  >
                  <lb-button
                    type="danger"
                    size="mini"
                    plain
                    @click="delPriceInfo(scope.row.id)"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="户型">
          <lb-button
            type="primary"
            icon="el-icon-plus"
            @click="addEditTypeInfo('add')"
            >添加户型</lb-button
          >
          <div style="height: 20px"></div>
          <el-table
            v-loading="typeLoading"
            :data="typeData"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="title" label="标题" width="180">
            </el-table-column>
            <el-table-column prop="sort" label="排序值"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    type="primary"
                    size="mini"
                    plain
                    @click="addEditTypeInfo('edit', scope.row.id)"
                    >{{ $t('action.edit') }}</lb-button
                  >
                  <lb-button
                    type="danger"
                    size="mini"
                    plain
                    @click="delTypeInfo(scope.row.id)"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="areaForm.id ? '编辑区域' : '添加区域'"
      :visible.sync="areaDialogVisible"
      width="500px"
      center
    >
      <el-form
        @submit.native.prevent
        :model="areaForm"
        :rules="areaFormRules"
        ref="areaForm"
        label-width="100px"
      >
        <el-form-item label="父级名称" prop="pid">
          <el-cascader
            v-model="areaForm.pid"
            :options="areaOptions"
            :props="ascaderProps"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input
            v-model="areaForm.title"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="sort">
          <el-input-number
            class="lb-input-number"
            v-model="areaForm.sort"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <lb-button @click="resetCloseDialog('areaForm', 'areaDialogVisible')">{{
          $t('action.cancel')
        }}</lb-button>
        <lb-button type="primary" @click="submitFormInfo('areaForm')">{{
          $t('action.submit')
        }}</lb-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="priceForm.id ? '编辑价格' : '添加价格'"
      :visible.sync="priceDialogVisible"
      width="500px"
      center
    >
      <el-form
        @submit.native.prevent
        :model="priceForm"
        :rules="priceFormRules"
        ref="priceForm"
        label-width="100px"
      >
        <el-form-item label="名称" prop="title">
          <el-input
            v-model="priceForm.title"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model="priceForm.value" placeholder="请输入值"></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="sort">
          <el-input-number
            class="lb-input-number"
            v-model="priceForm.sort"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <lb-button
          @click="resetCloseDialog('priceForm', 'priceDialogVisible')"
          >{{ $t('action.cancel') }}</lb-button
        >
        <lb-button type="primary" @click="submitFormInfo('priceForm')">{{
          $t('action.submit')
        }}</lb-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="typeForm.id ? '编辑户型' : '添加户型'"
      :visible.sync="typeDialogVisible"
      width="500px"
      center
    >
      <el-form
        @submit.native.prevent
        :model="typeForm"
        :rules="typeFormRules"
        ref="typeForm"
        label-width="100px"
      >
        <el-form-item label="名称" prop="title">
          <el-input
            v-model="typeForm.title"
            placeholder="请输入名称"
            :maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="sort">
          <el-input-number
            class="lb-input-number"
            v-model="typeForm.sort"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <lb-button @click="resetCloseDialog('typeForm', 'typeDialogVisible')">{{
          $t('action.cancel')
        }}</lb-button>
        <lb-button type="primary" @click="submitFormInfo('typeForm')">{{
          $t('action.submit')
        }}</lb-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ascaderProps: {
        value: 'id',
        label: 'title',
        checkStrictly: true
      },
      areaData: [],
      priceData: [],
      typeData: [],
      areaLoading: false,
      priceLoading: false,
      typeLoading: false,
      areaForm: {
        pid: [0],
        title: '',
        sort: 0
      },
      priceForm: {
        title: '',
        value: '',
        sort: 0
      },
      typeForm: {
        title: '',
        sort: 0
      },

      areaFormRules: {
        pid: {
          required: true,
          type: 'array',
          message: '请选择',
          trigger: 'change'
        },
        title: {
          required: true,
          type: 'string',
          message: '请输入名称',
          trigger: 'blur'
        },
        sort: {
          required: true,
          type: 'number',
          message: '请输入排序值',
          trigger: 'blur'
        }
      },
      priceFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入名称',
          trigger: 'blur'
        },
        value: {
          required: true,
          type: 'string',
          message: '请输入值',
          trigger: 'blur'
        }
      },
      typeFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入名称',
          trigger: 'blur'
        }
      },
      areaDialogVisible: false,
      priceDialogVisible: false,
      typeDialogVisible: false,
      areaOptions: []
    }
  },
  created () {
    this.getAreaOptionsData()
    this.getHouseAreaList()
    this.getHousePriceList()
    this.getHouseApartmentList()
  },
  methods: {
    getAreaOptionsData () {
      this.$api.getHouseAreaOptions().then(res => {
        console.log(res)
        if (res.code === 200) {
          this.areaOptions = [{
            id: 0,
            title: '顶级'
          }, ...res.data]
        }
      })
    },
    getHouseAreaList () {
      this.areaLoading = true
      this.$api.getHouseAreaList().then(res => {
        this.areaLoading = false
        if (res.code === 200) {
          this.areaData = res.data
        }
      })
    },
    getHousePriceList () {
      this.priceLoading = true
      this.$api.getHousePriceList().then(res => {
        this.priceLoading = false
        if (res.code === 200) {
          this.priceData = res.data
        }
      })
    },
    getHouseApartmentList () {
      this.typeLoading = true
      this.$api.getHouseApartmentList().then(res => {
        this.typeLoading = false
        if (res.code === 200) {
          this.typeData = res.data
        }
      })
    },
    addEditAreaInfo (type, id) {
      if (type === 'edit') {
        this.editGetHouseAreaInfo({
          id
        }, 'get')
      } else {
        this.areaForm = {
          pid: [0],
          title: '',
          sort: 0
        }
      }
      let copyAreaOptions = this.areaOptions
      this.areaOptions = []
      setTimeout(() => {
        this.areaOptions = copyAreaOptions
      }, 10)
      this.areaDialogVisible = true
    },
    delAreaInfo (id) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.delHouseAreaInfo({
          id,
          status: -1
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successDel'))
            this.getHouseAreaList()
          }
        })
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = this[name]
          if (name === 'areaForm') {
            if (subForm.id) { // 编辑区域房源信息
              this.editGetHouseAreaInfo(subForm, 'edit')
            } else { // 添加区域房源信息
              this.addHouseAreaInfo(subForm)
            }
          } else if (name === 'priceForm') {
            if (subForm.id) {
              this.editGetHousePeiceInfo(subForm, 'edit')
            } else {
              this.addHousePriceInfo(subForm)
            }
          } else if (name === 'typeForm') {
            if (subForm.id) {
              this.editGetHouseApartmentInfo(subForm, 'edit')
            } else {
              this.addHouseApartmentInfo(subForm)
            }
          }
        }
      })
    },
    /**
       * @method 添加房源区域信息
       */
    addHouseAreaInfo (formInfo) {
      this.$api.addHouseAreaInfo(formInfo).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.tipsSuccess()
          this.$refs['areaForm'].resetFields()
          this.areaDialogVisible = false
          this.getHouseAreaList()
          this.getAreaOptionsData()
        }
      })
    },

    /**
       * @method 编辑、回显房源区域信息
       */
    editGetHouseAreaInfo (formInfo, type) {
      this.$api.updateHouseAreaInfo(formInfo).then(res => {
        console.log(res)
        if (res.code === 200) {
          if (type === 'get') {
            for (let key in this.areaForm) {
              this.areaForm[key] = res.data[key]
            }
            this.areaForm.id = res.data.id
          } else {
            this.tipsSuccess()
            this.$refs['areaForm'].resetFields()
            this.areaDialogVisible = false
            this.getHouseAreaList()
          }
        }
      })
    },

    /**
       * @method 添加房源价格信息
       */
    addHousePriceInfo (formInfo) {
      this.$api.addHousePriceInfo(formInfo).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.tipsSuccess()
          this.priceDialogVisible = false
          this.getHousePriceList()
        }
      })
    },

    /**
       * @method 编辑、回显房源价格信息
       */
    editGetHousePeiceInfo (formInfo, type) {
      this.$api.updateHousePriceInfo(formInfo).then(res => {
        console.log(res)
        if (res.code === 200) {
          if (type === 'get') {
            console.log(1111)
            for (let key in this.priceForm) {
              this.priceForm[key] = res.data[key]
            }
            this.priceForm.id = res.data.id
          } else {
            this.tipsSuccess()
            this.$refs['priceForm'].resetFields()
            this.priceDialogVisible = false
            this.getHousePriceList()
          }
        }
      })
    },

    /**
       * @method 添加房源户型信息
       */
    addHouseApartmentInfo (formInfo) {
      this.$api.addHouseApartmentInfo(formInfo).then(res => {
        if (res.code === 200) {
          this.tipsSuccess()
          this.$refs['typeForm'].resetFields()
          this.typeDialogVisible = false
          this.getHouseApartmentList()
        }
      })
    },

    /**
       * @method 编辑、回显房源户型信息
       */
    editGetHouseApartmentInfo (formInfo, type) {
      this.$api.editHosueApartmentInfo(formInfo).then(res => {
        console.log(res)
        if (res.code === 200) {
          if (type === 'get') {
            for (let key in this.typeForm) {
              this.typeForm[key] = res.data[key]
            }
            this.typeForm.id = res.data.id
            this.typeDialogVisible = true
          } else {
            this.tipsSuccess()
            this.$refs['typeForm'].resetFields()
            this.typeDialogVisible = false
            this.getHouseApartmentList()
          }
        }
      })
    },
    resetCloseDialog (name, dialog) {
      this.$refs[name].resetFields()
      this[dialog] = false
    },
    addEditPriceInfo (type, id) {
      if (type === 'edit') {
        this.editGetHousePeiceInfo({
          id
        }, 'get')
      } else {
        this.priceForm = {
          title: '',
          value: '',
          sort: 0
        }
      }
      this.priceDialogVisible = true
    },
    delPriceInfo (id) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.delHousePriceInfo({
          id
        }).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successDel'))
            this.getHousePriceList()
          }
        })
      })
    },
    addEditTypeInfo (type, id) {
      console.log(id, type, '====>id type')
      if (type === 'edit') {
        this.editGetHouseApartmentInfo({
          id
        }, 'get')
      } else {
        this.typeForm = {
          title: '',
          sort: 0
        }
      }
      this.typeDialogVisible = true
    },
    delTypeInfo (id) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.delHouseApartmentInfo({
          id,
          status: -1
        }).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successDel'))
            this.getHouseApartmentList()
          }
        })
      })
    },
    tipsSuccess () {
      this.$message.success(this.$t('tips.successSub'))
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-house-screen {
  width: 100%;

  .page-main {
    width: 100%;
  }

  .el-input,
  .el-input-number,
  .el-select,
  .el-cascader {
    width: 300px;
  }
}
</style>
